<template>
  <el-select
    :class="`xselect x${_uid}`"
    :multiple="multiple"
    :size="size"
    :placeholder="placeholder"
    :filterable="filterable"
    v-model="val"
    @change="changeValue"
    :popper-class="`xselect x${_uid}`"
    @visible-change="handleVisibleChange">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>

<script>
import props from './props'

export default {
  name: 'header-navigate',

  props,

  data() {
    return {
      val: ''
    }
  },

  methods: {
    changeValue (value) {
      this.$emit('input', value)
      this.$emit('change', value)
    },

    setStyle () {
      const style = `
        .el-select.x${this._uid} .el-input__inner {
          color: ${this.color};
          background-color: ${this.bgColor};
          border-color: ${this.borderColor};
        }

        .el-select.x${this._uid} .el-input .el-select__caret {
          color: ${this.borderColor};
        }

        .el-select-dropdown.el-popper.x${this._uid} {
          background-color: ${this.dropdownBgColor};
          border-color: ${this.dropdownBorderColor};
        }

        .el-select-dropdown.el-popper.x${this._uid}[x-placement^=bottom] .popper__arrow {
          border-bottom-color: ${this.dropdownBorderColor};
        }

        .el-popper.x${this._uid}[x-placement^=bottom] .popper__arrow::after {
          border-bottom-color: ${this.dropdownBgColor};
        }

        .el-popper.x${this._uid} .el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
          color: ${this.dropdownItemHoverTextColor};
          background-color: ${this.dropdownItemHoverBg};
        }
      `

      const styleEl = document.getElementById(this._uid) || document.createElement('style')
      styleEl.id = this._uid
      styleEl.innerText = style.replace(/\n/g, '')

      document.head.appendChild(styleEl)
    }
  },

  computed: {
    style () {
      return {
        color: this.color,
        bgColor: this.bgColor,
        borderColor: this.borderColor,
        dropdownBgColor: this.dropdownBgColor,
        dropdownBorderColor: this.dropdownBorderColor,
        dropdownItemHoverBg: this.dropdownItemHoverBg,
        dropdownItemHoverTextColor: this.dropdownItemHoverTextColor
      }
    }
  },

  created () {
    if (this.multiple && this.value === '') {
      this.val = []
    } else {
      this.val = this.value === true ? '' : this.value
    }
  },

  mounted () {
    this.setStyle()
  },

  watch: {
    style: {
      deep: true,
      handler () {
        this.setStyle()
      }
    }
  }
}
</script>

<style lang="scss">
  @import './css/index.scss';
</style>
